<template>
  <div id="app">
    <div class="loading" v-show="$root.isShowLoading">
      <img src="./assets/images/loading.gif" alt="" />
    </div>
    <HomeNav v-if="$route.meta.isShowNav"></HomeNav>
    <Play
      v-if="currentMusic"
      :currentMusic="currentMusic"
      @update:paused="paused = $event"
      :playlist="caluSongMode"
      :currentIndex="currentIndex"
      :pause="paused"
      @update:music="
        currentMusic = $event.item;
        currentIndex = $event.index;
      "
      @update:songmode="songMode=$event"
    ></Play>
    <keep-alive>
      <router-view
        @update:music="currentMusic=$event.item;currentIndex=$event.index"
        @update:playlist="playlist = $event"
        v-bind:currentMusic="currentMusic"
        v-bind:paused="paused"
      />
    </keep-alive>
  </div>
</template>

<script>

import HomeNav from "./components/HomeNav";
import Play from "@/components/Play.vue";
export default {
  components: {
    HomeNav,
    Play,
  },
  data: function () {
    return {
      currentMusic: null,
      paused: null,
      playlist: [],
      currentIndex: 0,
      songMode:'order'
    };
  },
  computed:{
    caluSongMode(){
      switch(this.songMode){
        case 'single':
          return [this.currentMusic];
          case 'random':
          return this.playlist.slice(0).sort(()=>Math.random()-0.5);
        default :
          return this.playlist;
      }
    }
  }
};
</script>

<style>
audio {
  height: 30px;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

:root {
  --animate-duration:500ms;
  /* --animate-delay: 0.9s; */
}

.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  display: grid;
  place-content: center;
  z-index: 9;
}
</style>
